<template lang="pug">
  .tobanScheduleWrapper
    el-card(shadow="never" :bodyStyle="{padding: '16px'}")
      alert(type="info")
        el-row(type="flex" align="middle")
          el-col(:span="18")
            span 你可以将当天的课表 “保存为模板”，下次使用时直接 "载入模板" 即可, 再提交
          el-col(:span="6")
            el-button(type="primary" size="mini") 保存为模板
            el-button(type="primary" size="mini") 载入模板
      p.tc
        el-radio-group(v-model="classesId")
          el-radio-button(v-for="item in classList" :key="item.classesId" :label="item.classesId") {{item.classesName}}
      el-divider
        .weekWrapper
          el-button.weekStr(round size="small")
            | {{weekDuration.startDateString}} ~ {{weekDuration.endDateString}}
          el-date-picker(
            v-model="weekDay"
            :picker-options="{firstDayOfWeek: 1}"
            type="week"
            class="weekInput"
            @change="weekDayValue = '周一'"
          )
      el-tabs.mt16(v-model="weekDayValue" stretch)
        el-tab-pane(v-for="day in weekDays" :key="day" :name="day" :label="day")
      alert.mb16(type="warning" size="small") {{warnText}}
      toban-item(
        :isAdd="true"
        :list="info.nurseryScheduleRecordList"
        :value="{beginDate: new Date(`${weekDuration.dateArr[weekDays.indexOf(weekDayValue)]} 8:00:00`),endDate: new Date(`${weekDuration.dateArr[weekDays.indexOf(weekDayValue)]} 9:00:00`)}"
      )
      toban-item(
        v-for="item in info.nurseryScheduleRecordList"
        :key="item.id"
        :list="info.nurseryScheduleRecordList"
        :value="item"
        @delHandle="delSchedule"
      )
</template>
<script>
import dayjs from 'dayjs'
import Alert from '@/components/Basic/Alert'
import { getDateFromWeek } from '@/utils/date'
import { getNurseryClasses, getNurserySchule, getNurseryCheck } from '../api'
import TobanItem from './components/tobanItem'

const dateFormatStr = 'YYYY-MM-DD'

const warnStrs = [
  '请逐项添加详细的托班一日生活流程',
  '本周课表已审核通过，不支持修改',
  '本周课表正在审核中，暂时不能修改哦~',
  '当前日期已过，不支持排课！'
]

const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

const initDay = new Date().getDay()

export default {
  components: {
    Alert,
    TobanItem
  },
  data () {
    return {
      classesId: '',
      classList: [],
      weekDay: new Date(),
      weekDayValue: weekDays[initDay === 0 ? 6 : initDay - 1],
      weekDays,
      info: {
        nurseryScheduleId: '',
        nurseryScheduleRecordList: []
      },
      checkInfo: null // 审核详情
    }
  },
  computed: {
    infoListeners () {
      const { classesId, weekDay } = this
      return { classesId, weekDay }
    },
    weekDuration () {
      return getDateFromWeek(this.weekDay)
    },
    // 排课提示语
    warnText () {
      const { weekDay, checkInfo, isChecking } = this
      if (checkInfo?.status === 1) {
        return warnStrs[1]
      }
      if (isChecking) {
        return warnStrs[2]
      }
      if (weekDay.getTime() < new Date().getTime()) {
        return warnStrs[3]
      }
      return warnStrs[0]
    },
    isChecking () {
      const { checkInfo } = this
      return checkInfo && checkInfo.status !== 2
    }
  },
  watch: {
    // 获取详情监听
    infoListeners: {
      handler ({ classesId, weekDay }) {
        if (classesId && weekDay) {
          this.getInfo()
          this.getCheck()
        }
      }
    },
    // 周几变化了，日期也要变化
    weekDayValue (val) {
      const { dateArr } = this.weekDuration
      const day = weekDays.indexOf(val)
      this.weekDay = new Date(dateArr[day])
    }
  },
  created () {
    this.getClasses()
  },
  methods: {
    // 获取班级列表
    getClasses () {
      getNurseryClasses().then(res => {
        this.classList = res || []
        this.classesId = (res || [])[0]?.classesId
      })
    },
    // 获取排课详情
    getInfo () {
      const { classesId, weekDay } = this
      this.loading = true
      getNurserySchule({ classesId, courseDateStr: dayjs(weekDay).format(dateFormatStr) }).then(res => {
        this.info = {
          nurseryScheduleId: res?.nurseryScheduleId,
          nurseryScheduleRecordList: res?.nurseryScheduleRecordList || []
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 获取审批信息
    getCheck () {
      const { classesId, weekDuration } = this
      const { dateArr } = weekDuration
      getNurseryCheck({
        classesId,
        beginDate: dateArr[0],
        endDate: dateArr[dateArr.length - 1]
      }).then(res => {
        this.checkInfo = res
      })
    },
    // 删除排课
    delSchedule (id) {
      const { nurseryScheduleRecordList } = this.info
      this.info.nurseryScheduleRecordList = nurseryScheduleRecordList.filter(x => x.id !== id)
    }
  }
}
</script>
<style lang="scss" scoped>
.weekWrapper{
  position: relative;

  .weekStr {
    position: relative;
    z-index: 0;
  }
  .weekInput{
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0
  }
}

.el-divider--horizontal{
  margin-top: 36px
}
</style>
